<html>
<head>
    <meta charset="utf-8">
    <title>Chromium Third Party</title>
    <link href="//fonts.googleapis.com/css?family=Monda" rel="stylesheet" type="text/css">
    <style>

body {
    margin: 0 auto;
    width: 800px;
    font-family: 'Monda', sans-serif;
    background-color: #eee;
    -webkit-transition: background-color .3s;
}

a {
    text-decoration: none;
    color: yellowgreen;
    font-size: 80%;
    font-weight: initial;
}

p {
    font-weight: bold;
}

.block {
    background: #FFF;
    border-radius: 4px;
    padding: 4px 8px 8px 8px;
    margin: 4px 0 0 4px;
}

    </style>
  </head>
<body>

<div class="libraries"></div>

<script>
    var libraries = {{ libraries }};
    libraries.forEach(function(library) {
        var block = document.createElement('div');
        block.classList.add('block');
        block.innerHTML = '<p>'+ library['Name'] +' - <a href="'+ library['URL'] +'">'+ library['URL'] +'</a></p>';
        if (library['Description'])
            block.innerHTML += '<span>' + library['Description'] +'</span>';
        document.body.appendChild(block);
    });
</script>
</body>
</html>
